<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%--<script type="text/javascript" src="${ctx}/static/jquery/jquery-ztree-3.5.15/js/jquery.ztree.all-3.5.min.js"></script>--%>
<%--<link rel="stylesheet" href="${ctx}/static/jquery/jquery-ztree-3.5.15/css/zTreeStyle/zTreeStyle.css" type="text/css">--%>

<style>
    div.menuwrap {height:462px;}
    div.menuwrap div.left{float: left;width: 20%;}
    div.menuwrap div.right{float: right;width: 80%;}
    div.menuBackground {height:420px;text-align:left;}

    ul.ztree {margin:10px;border: 0px solid #617775;}
    ul.menuinfo {margin:10px; border: 0px solid #617775;width:500px;height:410px;overflow: hidden;}
    ul.selectTree {width:300px;}
</style>

<div class="panel_container">
    <div class="panel">
        <div class="panel_header">
            <div><h2>菜单管理</h2></div>
        </div>
        <div class="panel_body">
            <div id="main-content" class="tablewrapper">
                <div class="menuwrap">
                    <div class="left">
                        <div class="panel">
                            <div class="panel_header">
                                <div><h2>菜单树</h2></div>
                            </div>
                            <div class="panel_body">
                                <div class="menuBackground "><ul id="menuTree" class="ztree"></ul></div>
                           </div>
                       </div>
                    </div>

                    <div class="right">
                        <div class="panel">
                            <div class="panel_header">
                               <div>
                                   <h2>编辑</h2>
                               </div>
                            </div>
                            <div class="panel_body">
                                <form id="menuForm" class="searchtable">
                                    <input type="hidden" name="m_id" id="m_id"/>
                                    <input type="hidden" name="m_pid" id="m_pid"/>
                                    <div>
                                        <div class="info_item"><span>菜单名称:</span><input type="text" name="m_name" id="m_name" maxlength="25"  class="text_medium"/></div>
                                    </div>
                                    <div>
                                        <div class="info_item"><span>URL</span><input type="text" name="m_url" id="m_url" maxlength="100"  class="text_medium"/></div>
                                    </div>
                                    <div>
                                        <div class="info_item"><span>权限</span>
                                                <input type="text" name="m_pmDesc" id="m_pmDesc" readonly="readonly"/>
                                                - <input type="text" name="m_pmName" id="m_pmName"  readonly="readonly"/>
                                            <input type="hidden" name="m_pmId" id="m_pmId"/>
                                            <input type="button" value="权限查询" id="btn_search" onclick="showMenu(); ">&nbsp;

                                    </div>
                                    </div>
                                </form>
                            </div>

                            <div class="panel_footer">
                               <div>
                                   <input type="button" class="btn_blue" id="saveMenu" value="保存"/>&nbsp;&nbsp;<input type="button" class="btn_blue" id="removeMenu" value="删除"/>&nbsp;&nbsp;<input type="button" class="btn_blue" id="addMenu" value="新增"/>
                               </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="permissionTree" class="ztree selectTree"></ul>
</div>

<SCRIPT type="text/javascript">
    <!--
    var setting = {
        view: {
            selectedMulti: false
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        data: {
            keep: {
                parent:true,
                leaf:true
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
//            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRemove: onRemove,
            beforeClick: beforeClick,
            onClick: onClick
        }
    };

    var log, className = "dark";
    function beforeDrag(treeId, treeNodes) {
        return false;
    }

    function onRemove(e, treeId, treeNode) {

    }

    function beforeRename(treeId, treeNode, newName) {
        if (newName.length == 0) {
            alert("Please fill in menu name.");
            var zTree = $.fn.zTree.getZTreeObj("menuTree");
            setTimeout(function(){zTree.editName(treeNode)}, 10);
            return false;
        }
        return true;
    }
    function beforeClick(treeId, treeNode, clickFlag) {
        className = (className === "dark" ? "":"dark");
        return (treeNode.click != false);
    }
    function onClick(event, treeId, treeNode, clickFlag) {
        showMenuInfo(treeNode);
    }

    function showMenuInfo(treeNode){
        $("#m_id").val(treeNode.id);
        $("#m_pid").val(treeNode.pid);
        $("#m_name").val(treeNode.name);
        $("#m_url").val(treeNode.url);
        $("#m_pmId").val(treeNode.pmId);
        $("#m_pmName").val(treeNode.pmName);
        $("#m_pmDesc").val(treeNode.pmDesc);
    }

    function prepareNewMenu(id,pid){
        $("#m_id").val(id);
        $("#m_pid").val(pid);
        var nameObj = $("#m_name");
        if(nameObj.val().trim()==""){
            alert("Please fill in menu name.");
            return false;
        }
        return true;
    }

    function newMenu(pid){
        var nm = {id:"",pid:pid,name:"Menu name is required.",url:"",pmId:"",pmName:"",pmDesc:""};
        showMenuInfo(nm);
        return nm;
    }

    function addPre(e) {

        var zTree = $.fn.zTree.getZTreeObj("menuTree"),
        isParent = e.data.isParent,
        nodes = zTree.getSelectedNodes(),
        treeNode = nodes[0];
        if (treeNode && treeNode.pid!=null && treeNode.pid!="") {
            alert("Please choose a menu item first.");
            return;
        }
        var pid = 0;

        if (treeNode) {
            pid = treeNode.id;
            treeNode = zTree.addNodes(treeNode,newMenu(pid));
        } else {
            treeNode = zTree.addNodes(null, newMenu(pid));
        }

        if (treeNode) {
//            zTree.editName(treeNode[0]);
            zTree.selectNode(treeNode);
        } else {
            alert("Menu item locked, can't be able to add sub menu item.");
        }

    };

    function add(e) {

        var zTree = $.fn.zTree.getZTreeObj("menuTree"),
        isParent = e.data.isParent,
        nodes = zTree.getSelectedNodes(),
        treeNode = nodes[0];
        if (treeNode && treeNode.pid!=null && treeNode.pid!="") {
            alert("Please choose a menu item first.");
            return;
        }
        var pid = 0;
        if (treeNode) {
            pid = treeNode.id;
        }
        if(prepareNewMenu("",pid)){
            $.post("${ctx}/system/saveMenu"
                ,$('#menuForm').serialize()
                ,function(a){
                    if(a){
                        var node = eval("("+a+")");
                        node.isParent = isParent;

                        zTree = $.fn.zTree.getZTreeObj("menuTree");
                        nodes = zTree.getSelectedNodes();
                        treeNode = nodes[0];

                        if (treeNode) {
                            treeNode = zTree.addNodes(treeNode, node);
                        } else {
                            treeNode = zTree.addNodes(null, node);
                        }

                        if (treeNode) {
//                            zTree.editName(treeNode[0]);
                        } else {
                            alert("Menu item locked, can't be able to add sub menu item.");
                        }
                    }
            });
        }

    };

    function setMenuVals(tn,nn){
        tn.id= nn.id;
        tn.pid= nn.pid;
        tn.name= nn.name;
        tn.url= nn.url;
        tn.pmId= nn.pmId;
        tn.pmName= nn.pmName;
        tn.pmDesc= nn.pmDesc;
        return tn;
    }

    function save(e) {

        var zTree = $.fn.zTree.getZTreeObj("menuTree"),
        nodes = zTree.getSelectedNodes(),
        treeNode = nodes[0];
        if (nodes.length == 0) {
            alert("Please choose a menu item.");
            return;
        }
        if(prepareNewMenu(treeNode.id,treeNode.pid)){
            $.post("${ctx}/system/saveMenu"
                ,$('#menuForm').serialize()
                ,function(a){
                    if(a){
                        var node = eval("("+a+")");
                        var zTree = $.fn.zTree.getZTreeObj("menuTree");
                        nodes = zTree.getSelectedNodes();
                        zTree.updateNode(setMenuVals(nodes[0],node),true);
                    }
            });
        }

    }
    function remove(e) {
        var zTree = $.fn.zTree.getZTreeObj("menuTree"),
        nodes = zTree.getSelectedNodes(),
        treeNode = nodes[0];
        if (nodes.length == 0) {
            alert("Please choose a menu item.");
            return;
        }

        deleteConfirm(function(){
            $.post("${ctx}/system/deleteMenu"
                ,$('#menuForm').serialize()
                ,function(a){
                    if(a){
                        var zTree = $.fn.zTree.getZTreeObj("menuTree");
                        nodes = zTree.getSelectedNodes();
                        treeNode = nodes[0];
                        zTree.removeNode(treeNode, true);
                    }
            });
        })


    }

    var setting_select = {
    /*    check: {
            enable: true,
            chkStyle: "radio",
            radioType: "all"
        },*/
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick2
        }
    };

    function showPermissionInfo(treeNode){
        $("#m_pmId").val(treeNode.id);
        $("#m_pmName").val(treeNode.desc);
        $("#m_pmDesc").val(treeNode.name);
    }

    function onClick2(e, treeId, treeNode) {
//        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        showPermissionInfo(treeNode);
        return false;
    }

    function showMenu() {
        var cityObj = $("#m_pmDesc");
        var cityOffset = cityObj.offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "btn_search" || event.target.id == "m_pmDesc" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }


    $(document).ready(function(){
//        $("#tabs").tabs();
        $.fn.zTree.init($("#menuTree"), setting, ${mNodes});
        $.fn.zTree.init($("#permissionTree"), setting_select, ${pNodes});
//        $("#addParent").bind("click", {isParent:true}, add);
        $("#saveMenu").bind("click", {isParent:false}, save);
        $("#addMenu").bind("click", {isParent:false}, add);
//        $("#editName").bind("click", edit);
        $("#removeMenu").bind("click", remove);
//        $("#clearChildren").bind("click", clearChildren);
    });
    //-->
</SCRIPT>